﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<meta name="keywords" content="UI/API/1.7/Draggable" />
		<title>UI/API/1.7/Draggable - jQuery JavaScript Library</title>
		<link rel="stylesheet" href="style/reset.css" type="text/css" />
		<link rel="stylesheet" href="style/screen.css" type="text/css" />
		<style type="text/css" media="screen,projection">/*<![CDATA[*/ @import "style/main.css?9"; /*]]>*/</style>

		<link rel="stylesheet" type="text/css" href="style/jquery.tabs.css" />
		<!--[if lte IE 7]>
		<link rel="stylesheet" href="style/jquery.tabs-ie.css" type="text/css" media="projection, screen"/>
		<![endif]-->

		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script src="js/jquery.tabs.js"></script>

		<script>$(function(){
			$("div[id=examples]").each(function(){
				$(this).siblings("div:first").find("div.desc").after(
					$(this).find("div.example:has(#demo):first").remove().clone());

				if ( !$("div.example", this).length )
					$(this).remove();
			});

			$("div.entry")
				.children("p").remove().end()
				.find("ul:first li").each(function(){
					if ( !$(this).parent().siblings( $("a",this).attr("href") ).length )
						$(this).remove();
				}).end()
				.not(".ui")
				.tabs();

			$("div.args > br").remove();

			$("div.example")
				.children("p").remove().end()
				.tabs();

			var keywords = "String,Number,Object,Options,Array,Function,Callback,Selector,Event,Element,Integer,Float,Boolean".split(",");

			$("td.default span, td.type").each(function(){
				var html = this.innerHTML;
				jQuery.each(keywords, function(i,key){
					html = html.replace(new RegExp(key, "ig"), "<a href='/Types#" + key + "'>" + key + "</a>");
				});
				this.innerHTML = html;
			});

			$("div[id=source]").each(function(){
				var source = $("pre", this).html()
					.replace(/<\/?a.*?>/ig, "")
					.replace(/<\/?strong.*?>/ig, "")
					.replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&amp;/g, "&");

				//var items = [];
				//source = source.replace(/\s*<(link|script).*?>\s\*/g, function(m){
					//items.push(m);
					//return "";
				//}).replace("</head>", items.join("") + "</head>")
				//*/

				var iframe = document.createElement("iframe");
				iframe.src = "/index-blank.html";
				iframe.width = "100%";
				iframe.height = $(this).prev().attr("rel") || "125";
				iframe.style.border = "none";
				$(this).prev().append(iframe);


				$(window).load(function(){
					var doc = iframe.contentDocument || iframe.contentWindow.document;
					source = source
						// IE needs to wait for the script to load (?)
						.replace("$(document).ready(function(){", "window.onload = (function(){try{")
						.replace(/}\);\s*<\/sc/, "}catch(e){}});</sc")
						//.replace("http://code.jquery.com/jquery-latest.js", "http://code.jquery.com/jquery-1.3rc2.js")
						.replace("</head>", "<style>html,body{border:0; margin:0; padding:0;}</style></head>");
					doc.open();
					doc.write( source );
					doc.close();
				});

			});
		});</script>
		<script type="text/javascript" src="js/custom.js"></script>
		<!--[if lt IE 5.5000]><style type="text/css">@import "style/IE50Fixes.css";</style><![endif]-->
		<!--[if IE 5.5000]><style type="text/css">@import "style/IE55Fixes.css";</style><![endif]-->
		<!--[if IE 6]><style type="text/css">@import "style/IE60Fixes.css";</style><![endif]-->
		<!--[if IE 7]><style type="text/css">@import "style/IE70Fixes.css?1";</style><![endif]-->
		<!--[if lt IE 7]><script type="text/javascript" src="style/IEFixes.js"></script>
		<meta http-equiv="imagetoolbar" content="no" /><![endif]-->
		
		<!-- Head Scripts -->
			</head>
	<body id="jq-interior"  class="mediawiki ns-0 ltr">

	<div id="jq-siteContain">
			<div id="jq-content" class="jq-clearfix">

				<div id="jq-interiorNavigation">
					<div class='jq-portlet' id='jq-p-Getting-Started'>
						<h5></h5>
						<div class='jq-pBody'>
							<ul>
								<li id="jq-ui-doc-n-Draggable"><a href="Draggable.html">Draggable</a></li>
								<li id="jq-ui-doc-n-Droppable"><a href="Droppable.html">Droppable</a></li>				
								<li id="jq-ui-doc-n-Resizable"><a href="Resizable.html">Resizable</a></li>
								<li id="jq-ui-doc-n-Selectable"><a href="Selectable.html">Selectable</a></li>
								<li id="jq-ui-doc-n-Sortable"><a href="Sortable.html">Sortable</a></li>
							</ul>				
						</div>
					</div>
						<div class='jq-portlet' id='jq-p-API-Reference'>
						<h5>部件</h5>
						<div class='jq-pBody'>
							<ul>
								<li id="jq-ui-doc-n-Accordion"><a href="Accordion.html">Accordion</a></li>
								<li id="jq-ui-doc-n-Datepicker"><a href="Datepicker.html">Datepicker</a></li>				
								<li id="jq-ui-doc-n-Dialog"><a href="Dialog.html">Dialog</a></li>
								<li id="jq-ui-doc-n-Progressbar"><a href="Progressbar.html">Progressbar</a></li>
								<li id="jq-ui-doc-n-Slider"><a href="Slider.html">Slider</a></li>
								<li id="jq-ui-doc-n-Tabs"><a href="Tabs.html">Tabs</a></li>
							</ul>
						</div>
					</div>
						<div class='jq-portlet' id='jq-p-Plugins'>
				
						<h5>动画</h5>
						<div class='jq-pBody'>
							<ul>
								<li id="jq-ui-doc-n-AddClass"><a href="AddClass.html">AddClass</a></li>
								<li id="jq-ui-doc-n-RemoveClass"><a href="RemoveClass.html">RemoveClass</a></li>
                                <li id="jq-ui-doc-n-Animate"><a href="Animate.html">Animate</a></li>
                                <li id="jq-ui-doc-n-Effect"><a href="Effect.html">Effect</a></li>
                                <li id="jq-ui-doc-n-Hide"><a href="Hide.html">Hide</a></li>
                                <li id="jq-ui-doc-n-Show"><a href="Show.html">Show</a></li>
                                <li id="jq-ui-doc-n-SwitchClass"><a href="SwitchClass.html">SwitchClass</a></li>
                                <li id="jq-ui-doc-n-Toggle"><a href="Toggle.html">Toggle</a></li>
                                <li id="jq-ui-doc-n-ToggleClass"><a href="ToggleClass.html">ToggleClass</a></li>
							</ul>
						</div>				
					</div>					
				</div><!-- /#interiorNavigation -->

				<div id="jq-primaryContent">
		<div id="column-content">
	<div id="docs-content">
		<a name="top" id="top"></a>
				<h1 class="firstHeading">UI/API/1.7/Animate</h1>
		<div id="bodyContent">
<!-- start content -->

<p><a href="/UI" title="UI">&laquo; Back to the jQuery UI Docs</a>
</p><p>jQuery UI effects core 拓展了动画功能使其可以实现颜色动画. 这是大量使用了一流的转型特征,它能够在彩色动画中使用以下属性:
</p>
<ul><li> <b>backgroundColor</b>
</li><li> <b>borderBottomColor</b>
</li><li> <b>borderLeftColor</b>
</li><li> <b>borderRightColor</b>
</li><li> <b>borderTopColor</b>
</li><li> <b>color</b>
</li><li> <b>outlineColor</b>
</li></ul>
<p>或者下面的一种组合:
</p>
<ul><li> <b>hex (#FF0000)</b>
</li><li> <b>rgb (rgb(255,255,255))</b>
</li><li> <b>names ("black")</b>
</li></ul>
<p><br />
</p><p><div class="options list"><table class="options examples" cellspacing="0"><thead><tr><th>Name</th><th>Type</th></tr></thead><tbody>
</table><b class="options">示例:</b><table class="options examples" cellspacing="0"><thead><tr><th>Name</th><th>Type</th></tr></thead><tbody>
<div class="example">
<ul><li><a href="#demo"><span>代码示范</span></a></li><li><a href="#source"><span>查看源文件</span></a></li></ul>
<div id="demo" class="tabs-container" rel="125">
一个简单的色彩动画.<br />
</p>
<pre>$(&quot;.block&quot;).<a href="/Events/toggle" title="Events/toggle">toggle</a>(function() {
    $(this).<a href="/Effects/animate" title="Effects/animate">animate</a>({ backgroundColor: &quot;black&quot; }, 1000);
},function() {
    $(this).<a href="/Effects/animate" title="Effects/animate">animate</a>({ backgroundColor: &quot;#68BFEF&quot; }, 500);
});

</pre>
<p></div><div id="source" class="tabs-container">
</p>
<pre>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "<a href="http://www.w3.org/TR/html4/loose.dtd" class="external free" title="http://www.w3.org/TR/html4/loose.dtd">http://www.w3.org/TR/html4/loose.dtd</a>"&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;script src="<a href="http://code.jquery.com/jquery-latest.js" class="external free" title="http://code.jquery.com/jquery-latest.js">http://code.jquery.com/jquery-latest.js</a>"&gt;&lt;/script&gt;
  
  &lt;script src=&quot;ui/effects.core.js&quot;&gt;&lt;/script&gt;

  &lt;script&gt;
  $(document).ready(function(){
    $(&quot;.block&quot;).<a href="/Events/toggle" title="Events/toggle">toggle</a>(function() {
    $(this).<a href="/Effects/animate" title="Effects/animate">animate</a>({ backgroundColor: &quot;black&quot; }, 1000);
},function() {
    $(this).<a href="/Effects/animate" title="Effects/animate">animate</a>({ backgroundColor: &quot;#68BFEF&quot; }, 500);
});

  });
  &lt;/script&gt;
  &lt;style&gt;
  .block { 
    color: white;
    background-color: #68BFEF;
    width: 150px; 
    height: 70px;
    margin: 10px; 
  }
  &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;div class=&quot;block&quot;&gt; Click me&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
<p></div>
</p><p></div>
</p><p></tbody></table></div>
</p><!-- 
Pre-expand include size: 3730 bytes
Post-expand include size: 5382 bytes
Template argument size: 3450 bytes
Maximum: 2097152 bytes
-->

<!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:3094-0!1!0!!en!2 and timestamp 20090303124132 -->

						<!-- end content -->
		</div>
	</div>
		</div>
				</div><!-- /#primaryContent -->				
			</div><!-- /#content -->
	</div><!-- /#siteContain -->	
	</body>
<!-- Cached 20090303115837 -->
</html>